<template>
    <div>

      <!--导航栏-->
      <div class="a2">
        <div class="a7">
          <div class="a3">
            <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
            <div class="a5">
              <button class="a5a">
                <router-link :to="'Home'">首页</router-link>
              </button>
              <button class="a5a">我的活动</button>
              <button class="a5a">
                <router-link :to="'MyTribe'">我的部落</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyInfo'">个人信息</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
              </button>
              <button class="a5a">APP下载</button>
            </div>
            <div class="a6">
              <div style="width: 300px"></div>
              <div class="a6a"></div>
              <div class="a6a"></div>
              <div class="a6aa"></div>
            </div>
          </div>
        </div>
      </div>


<div class="j1">

  <div class="j2">
    <div class="j3">
      <div class="j5">
      <div style="background: orange;height: 20px;width: 20px;border-radius: 50%;text-align: center;">?</div>
      <div style="margin-left: 10px">帮助中心</div>
    </div>
      <div class="j6">
        <div style="font-weight: bold;margin-top: 25px;">负责人和组织者有什么作用？</div>
        <p style="margin-top: 20px;background: #F4F4F4;width: 200px;line-height: 2.5;padding: 10px;font-size: 12px">负责人管理整个活动，只可设置一名；组织者只可进行签到管理，可不设或设置多名。两者负责或组织活动的记录可进入个人成长记录中。</p>
        <div>【录取方式】如何选择？</div>
        <div style="margin-top: 30px">什么是【参与范围】？</div>
        <div style="margin-top: 30px">【报名信息设置】有什么作用？</div>
        <div style="margin-top: 30px">【是否加入专题】该如何选择？</div>
        <div style="margin-top: 30px"><img src="../../assets/c3.png" height="174" width="208"/></div>
      </div>
    </div>
    <div class="j4">
      <div style="width: 900px;margin: auto;">
      <div style="border-bottom: 1px solid gainsboro;height:50px;display: flex;align-items: center">
      <div style="color: orange">发布活动</div>
      </div>
        <div style="width: 60px;border: 1px solid orange"></div>
      </div>

      <div style="width: 850px;margin: auto;margin-top: 60px">
        <div style="font-size: 17px;font-weight: bolder">STEP基本信息</div>

        <div style="margin-top: 50px;">
          <el-form :model="form" label-width="100px">
            <el-form-item label="活动名称：">
              <el-input v-model="form.name" placeholder="请输入活动标题"></el-input>
            </el-form-item>
            
              <el-form-item label="报名时间：">
                <el-date-picker v-model="form.up_begin_time" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="报名开始时间"></el-date-picker> ——
                <el-date-picker  v-model="form.up_end_time" placeholder="报名结束时间"></el-date-picker>
              </el-form-item>

            <el-form-item label="活动时间：">
              <el-date-picker  type="datetime" placeholder="活动开始时间"></el-date-picker> ——
              <el-date-picker  type="datetime" placeholder="活动结束时间"></el-date-picker>
            </el-form-item>

            <el-form-item label="活动介绍：">
              <el-input v-model="input" type="textarea" placeholder="请输入活动内容"></el-input>
            </el-form-item>

            <el-form-item label="报名要求：">
              <el-input v-model="input" placeholder="请输入要求内容"></el-input>
            </el-form-item>

            <el-form-item label="活动类型：">
              <el-select v-model="model" placeholder="请选择">
                <el-option
                  v-for="item in optionsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="报名人数：">
              <el-input v-model="input" placeholder="请输入人数"></el-input>
            </el-form-item>

            <el-form-item label="活动地点：">
              <el-input v-model="input" placeholder="请输入活动地点"></el-input>
            </el-form-item>

            地图

            <el-form-item label="主办方：">
              <el-select v-model="model" placeholder="请选择">
                <el-option
                  v-for="item in optionsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="活动级别：">
              <el-select v-model="model" placeholder="请选择">
                <el-option
                  v-for="item in optionsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>



            <el-form-item label="活动照片：" :label-width="formLabelWidth">
              <img :src="preImgUrl.length==0?form.photopath:preImgUrl" width="100px">
              <el-upload
                class="upload-demo"
                action=""
                :auto-upload="false"
                :on-change="handelChange"
              >
                <el-button size="small" type="primary" style="background: #66B1FF">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>

            <el-form-item label="学分设置：">
              <el-input v-model="input" placeholder="请输入活动学分"></el-input>
            </el-form-item>

            <el-form-item label="组织者：">
              <el-select v-model="model" placeholder="请选择">
                <el-option
                  v-for="item in optionsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <div style="margin-top: 100px;display: flex;align-content: center">
            <div style="margin: auto">
          <button class="j7">发布</button>
            </div>
        </div>
        </div>
      </div>
    </div>

  </div>
</div>









      <!--页尾-->
      <div class="c1">
        <div class="c2">
          <div class="c3">
            <div>到梦简介</div>
            <div>到梦协议</div>
            <div>到梦服务</div>
            <div>第二课堂全国活动查询</div>
            <div>第二课堂全国活动证书查询</div>
            <div>校企共建</div>
            <div>问题与帮助</div>
            <div>联系我们</div>
            <div>APP使用说明</div>
            <div>盗梦空间使用章程和制度</div>
          </div>
          <div class="c4"></div>
          <div class="c5">
            <div>京公网安备11010802024175 到梦空间系统</div>
            <div>2016-2021 Copyright©全国共青团研究中心</div>
          </div>
        </div>
      </div>


    </div>
</template>

<script>
    export default {
        name: "Publish",
      data(){
          return{
            preImgUrl:'',
            formLabelWidth:'100px',
            form:{},
          }
      }
    }
</script>

<style scoped>
  a{
    color: black;
    text-decoration: none;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;

    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .c1{
    background: #D6D8DA;
    margin-top: 1400px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }
  .j1{
    background: #F4F4F4;
    width: 100%;
    height: 1500px;
    position: absolute;
  }
  .j2{
    width: 1210px;
    /*height: 1400px;*/
    margin: auto;
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
  }
  .j3{
    width: 245px;
    background: white;
    height: 650px;
  }
  .j5{
    display: flex;
    align-items: center;
    border-bottom: 1px solid lightgray;
    height: 50px;
    padding-left: 20px;
  }
  .j6{
    font-size: 13px;
    width: 220px;
    margin: auto;
  }
  .j4{
    width: 935px;
    background: white;
    font-size: 13px;
    height: 1400px;
  }
  .j7{
    background: orange;
    border-radius: 5px;
    width: 80px;height: 30px;
    color: white;
  }
</style>
